<template>
  <div>
    <div class="header">
      <div class="name">
        牧场名称:<input placeholder="请输入" class="input">
      </div>
      <div class="state">
         状态
        <select>
          <option>全部</option>
          <option>局部</option>
        </select>
      </div>


      <div class="query">
        <el-row>
          <el-button>查询</el-button>
        </el-row>
      </div>

      <div class="reset">
        <el-row>
          <el-button>重置</el-button>
        </el-row>
      </div>
      <div class="addranch">
        <el-row>
          <el-button type="primary" @click="dialogFormVisible = true">添加牧场</el-button>
        </el-row>
      </div>
    </div>
    <hr/>
    <div class="componet">

      <div class="ranchbox"
           v-for="(item,index) in list" :key="index"
           :hid="item.hid"
           :hname="item.hname"
           :lanNumber="item.lanNumber"
           :erNumber="item.erNumber"
           :yvjingNumber="item.yvjingNumber"
           :outlineNumber="item.outlineNumber"
           :state="item.state">

          <div class="image">

          </div>
          <div class="company">{{item.hname}}</div>

          <div class="msg">
            <div class="msgleft">
              <div class="msgleft1">
                存栏量:{{item.lanNumber}}
              </div>
              <div class="msgleft2">
                监管预警数:{{item.yvjingNumber}}
              </div>

            </div>
            <div class="msgright">
              <div class="msgright1">
                耳标盘点数量:{{item.erNumber}}
              </div>
              <div class="msgright2">
                离线设备数量:{{item.outlineNumber}}
              </div>
            </div>
          </div>
          <div class="footer">
            <el-row class="btn">
              <el-button type="primary" plain size="small">查看</el-button>
              <el-button type="warning" plain size="small" @click="update(item.hid)">编辑</el-button>
              <el-button type="danger" plain size="small" @click="del(item.hid)">删除</el-button>
              <el-button type="info" plain size="small" @click="ban(item.hid)">停用</el-button>
            </el-row>

        </div>
      </div>

    </div>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="harvestData.currentPage"
        :page-sizes="[3,6,9,12]"
        :page-size="3"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>



    <el-dialog title="添加牧场" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="牧场名称" :label-width="formLabelWidth">
          <el-input v-model="form.hname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="存栏量" :label-width="formLabelWidth">
          <el-input v-model="form.lanNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="耳标盘点数量" :label-width="formLabelWidth">
          <el-input v-model="form.erNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="监管预警数" :label-width="formLabelWidth">
          <el-input v-model="form.yvjingNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备离线数量" :label-width="formLabelWidth">
          <el-input v-model="form.outlineNumber" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addharvest">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="修改数据" :visible.sync="dialogFormVisible2">
      <el-form :model="form2">
        <el-form-item label="存栏量" :label-width="formLabelWidth2">
          <el-input v-model="form2.lanNumber" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="耳标盘点数量" :label-width="formLabelWidth2">
          <el-input v-model="form2.erNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="监管预警数" :label-width="formLabelWidth2">
          <el-input v-model="form2.yvjingNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备离线数量" :label-width="formLabelWidth2">
          <el-input v-model="form2.outlineNumber" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="edit(form2.hid)">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import axios from "axios";
export default {
  data(){
    return{
      harvestData:{
        currentPage:1,
        pageSize:3

      },
      // fid:'',
      list:[],
      total:0,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form:{
        hid:'',
        hname: '',
        lanNumber:'',
        erNumber:'',
        yvjingNumber:'',
        outlineNumber:''
      },
      form2:{
        hid:'',
        hname: '',
        lanNumber:'',
        erNumber:'',
        yvjingNumber:'',
        outlineNumber:''
      },
      formLabelWidth: '100px',
      formLabelWidth2: '100px',


    }
  },


created() {
    axios.get('/day19_04_ssm_crud_war/harvest/list',{params:this.harvestData}).then(res=>{
      console.log(res)
      this.list=res.data.data1;
      //你保存总的数据条数
      this.total=res.data.total;
      console.log('list',this.list);
    })

},
methods: {

  async addharvest() {
    let res = await axios.post('/day19_04_ssm_crud_war/harvest/add', this.form);
    console.log(res)
    if (res.data.code == 1) {
      this.$message({
        message: '新增牧场成功',
        type: "success"
      })
      this.dialogFormVisible = false,
          this.reload()

    } else {
      this.$message({
        message: '新增牧场失败',
        type: 'error'
      })
    }

  },

  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    //修改当前页码 为当前用户点击的
    this.harvestData.currentPage = val;
    //进入页面的瞬间获取是第一页数据
    this.reload();
  },

  update(item) {
    this.dialogFormVisible2 = true;
    console.log(item);
    this.form2.hid=item;
    this.form2.lanNumber = item.lanNumber;
    this.form2.erNumber = item.erNumber;
    this.form2.yvjingNumber = item.yvjingNumber;
    this.form2.outlineNumber = item.outlineNumber;

  },
  async edit(hid){
    console.log(hid)
  let res = await axios.post("/day19_04_ssm_crud_war/harvest/edit", this.form2);
  console.log(res.data.code);
  // 提示用户操作结果
  if (res.data.code == 1) {
  this.$message({
    message: '修改信息成功',
    type: 'success',
  })
} else {
  this.$message({
    message: '修改信息失败',
    type: 'error',
  })
}
// 关闭弹窗
this.dialogFormVisible2 = false;
  this.reload();
// 重新渲染当前页的数据
  },


  async del(hid){
    let res= await axios.post('/day19_04_ssm_crud_war/harvest/del',{hid})
    console.log(res)
    if (res.data.code==1){
      this.$message({
        message:'删除成功',
        type:"success"
      })
      this.reload()
    }else {
      this.$message({
        message:'删除失败',
        type:'error'
      })
    }

  },
  reload(){
    axios.get('/day19_04_ssm_crud_war/harvest/list',{params:this.harvestData}).then(res=>{
      console.log(res)
      this.list=res.data.data1;
      //你保存总的数据条数
      this.total=res.data.total;
      console.log('list',this.list);
    })

  },
  async ban(hid){
    let  res = await axios.post('/day19_04_ssm_crud_war/harvest/ban',{hid})
    console.log(res)
    if (res.data.code == 1){
      this.$message({
        message:'禁用成功',
        type:"success"
      })
      this.reload()
    }else {
      this.$message({
        message:'禁用失败',
        type:'error'
      })
    }

  },
}
}
</script>

<style lang="less" scoped>
.header{
  width: 100%;
  height: 50px;
  display: flex;
  margin-top: 20px;

}
.name{
  width: 200px;
  height: 5px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;

}
.state{
  margin-left:200px;
  line-height: 25px;
}
.query{
  margin-left: 100px;
}
.reset{
  margin-left: 30px;
}
.addranch{
  margin-left: 30px;
}
.input{
  position: absolute;
  left: 70px;


}
.componet{
  display: flex;

}
.update{
  margin-left: 20px;
}
.ranchbox{
  width: 300px;
  height: 400px;
  border: 1px solid #271c19;
  margin-top: 50px;
  margin-left: 20px;

}
.image{
  width: 300px;
  height: 200px;
  background: url("@/assets/img/3.png");
}
.company{
  text-align: center;
  font-family:  "微软雅黑", Arial, sans-serif;
  margin-top: 10px;
}
.msg{
  display: flex;
  margin-top: 12px;
}
.msgleft{
  //margin-top: 10px;
  margin-left: 10px;
  padding: 5px;
  margin-bottom: 10px;
}
.msgright{
  margin-left: 10px;
  //margin-top: 10px;
  padding: 5px;
  margin-bottom: 10px;



}
.msgleft2{
  margin-top: 10px;
}
.msgright2{
  margin-top: 10px;
}
.boder2{
  //border: 1px solid #271c19;

}
.footer{
  width: 300px;
  height: 86px;
  border: 1px solid darkgray;
}
.btn{
  margin-left: 20px;
  line-height: 86px;
}
</style>